<template>
  <div>
    <div class="box">
      <span style="margin: 15px;font-size: larger;">销售信息</span>
      <div style="display: flex;">
        <div :class="{ 'shop-card': leaseData.specMethod === 2, 'selected-shop-card': leaseData.specMethod === 1 }"
          @click="changeSpecMethod(1)">
          <div style="margin:5px 5px 3px 5px;font-weight: bold;">
            单规格商品<br />
          </div>
          <span style="color:rgb(162, 162, 162); margin:0px 5px;">一个商品</span>
          <div class="icon-box">
            <i class="el-icon-shopping-bag-2" style="font-size: 50px;"></i>
          </div>
        </div>

        <div :class="{ 'shop-card': leaseData.specMethod === 1, 'selected-shop-card': leaseData.specMethod === 2 }"
          @click="changeSpecMethod(2)">
          <div style="margin:5px 5px 3px 5px;font-weight: bold;">
            多规格商品<br />
          </div>
          <span style="color:rgb(162, 162, 162); margin:0px 5px;">多分类商品</span>
          <div class="icon-box">
            <i class="el-icon-shopping-bag-1" style="font-size: 50px;;"></i>
          </div>
        </div>
      </div>
      <!-- 详细规格 -->
      <div v-for="(item, index) in leaseData.specs" :key="index" style="display: flex;align-items:center;">
        <div class="spec-box">租赁时间 
            <el-select v-model="item.leaseTime" placeholder="请选择租赁时间" 
            style="margin:0 20px;width: 200px;"
            @change="leaseTimeChange($event, index)">
              <el-option 
                v-for="option in leaseTimeOptions"
                :key="option.id"
                :value="option.value">
              </el-option>
            </el-select>
          
          </div>
        <div class="spec-box">租赁价格 <el-input v-model.number="item.price" placeholder="请输入单价"
            style="margin:0 20px;width: 200px;"></el-input>元</div>
        <i class="el-icon-delete" @click="changeSpec(index)"
          v-show="leaseData.specMethod === 2 && leaseData.specs.length > 1"></i>
      </div>
      <el-button style="margin: 10px;" type="primary" @click="changeSpec(-1)"
        v-show="leaseData.specMethod === 2">+添加规格</el-button>

    </div>
    <!-- 基础信息 -->
    <div class="box">
      <span style="margin: 10px;font-size: larger;">基础信息</span>
      <div class="goods-box">商品标题 <el-input v-model="leaseData.name" placeholder="请输入名称"
          style="margin:0 20px;width: 350px;"></el-input></div>
      <div class="goods-box">商品分类 
        <el-select v-model="leaseData.categoryName" placeholder="请选择" @change="categoryChange" style="margin:0 20px;width: 350px;">
        <el-option
          v-for="item in categories"
          :key="item.id" :value="item.name" ></el-option>
        </el-select></div>    
      <div class="goods-box">商品标签 <el-input v-model="leaseData.tag" placeholder="请输入标签"
          style="margin:0 20px;width: 350px;"></el-input></div>
      <div class="goods-box">商品库存 <el-input v-model="leaseData.stock" placeholder="请输入标签"
            style="margin:0 20px;width: 350px;"></el-input></div>
      <div style="display: flex;margin: 30px 10px 20px 10px;">商品主图
        <div style="color:rgb(162, 162, 162);margin-left: 20px;">
          <UploadComponent :image-limit="1" @handleUpload="handleMainUpload" ref="mainUpload"></UploadComponent>
          *商品图片单张大小不能超过3M,最多上传1张,支持JPG、PNG等格式
        </div>
      </div>

    </div>
    <!-- 物流信息 -->
    <div class="box">
      <span style="margin: 10px;font-size: larger;">物流信息</span>
      <div class="goods-box">提取方式
        <el-radio-group v-model="leaseData.express" style="margin:20px;">
          <!-- <el-radio :label="1">使用物流配送</el-radio> -->
          <el-radio :label="2">指定地点自提:
            <el-input v-model="leaseData.pickup" placeholder="请输入自提点" style="margin:0 20px;width: 350px;"></el-input>
          </el-radio>
        </el-radio-group>
      </div>
      <div class="goods-box">区域限发
        <el-radio-group v-model="leaseData.scope" style="margin:20px;">
          <el-radio :label="1">校内区域发</el-radio>
          <!-- <el-radio :label="2" style="margin-left:14px;">校外区域发</el-radio> -->
        </el-radio-group>
      </div>
    </div>
    <!-- 支付信息 -->
    <div class="box">
      <span style="margin: 10px;font-size: larger;">支付信息</span>
      <div class="goods-box">支付方式
        <el-radio-group v-model="leaseData.payMethod" style="margin:20px;">
          <el-radio :label="1">微信</el-radio>
          <!-- <el-radio :label="2">支付宝</el-radio>
          <el-radio :label="3">银联</el-radio> -->
        </el-radio-group>
      </div>
      <div class="goods-box">电子发票
        <el-radio-group v-model="leaseData.invoice" style="margin:20px;">
          <!-- <el-radio :label="true">是</el-radio> -->
          <el-radio :label="false" style="margin-left:0px;">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 图文描述 -->
    <div class="box">
      <span style="margin: 20px;font-size: larger;">图文描述</span>
      <div style="display: flex;margin: 30px 10px 20px 10px;">商品视频
        <div style="color:rgb(162, 162, 162);margin-left: 20px;">
          <UploadComponent :image-limit="1" @handleUpload="handleVideoUpload" ref="videoUpload"></UploadComponent>
          *时长&lt;=60s,微视频建议15s。
        </div>
      </div>
      <div style="display: flex;margin: 30px 10px 20px 10px;">详细图片
        <div style="color:rgb(162, 162, 162);margin-left: 20px;">
          <UploadComponent :image-limit="12" @handleUpload="handleImagesUpload" ref="imagesUpload"></UploadComponent>
          *商品图片单张大小不能超过3M，最多上传12张，支持JPG、PNG等格式
        </div>
      </div>
      <div style="display: flex;margin: 30px 10px 20px 10px;">详细描述
        <el-input type="textarea" style="margin:0 20px 0 30px; width: 400px;" :rows="4" v-model="leaseData.description"
          placeholder="请输入内容">
        </el-input>
      </div>
    </div>
    <!-- 售后服务 -->
    <div class="box">
      <span style="margin: 10px;font-size: larger;">售后服务</span>
      <div class="goods-box">服务详情
        <el-radio-group v-model="leaseData.service" style="margin:20px;">
          <el-radio label="保修服务">保修服务</el-radio>
          <el-radio label="退换货承诺">退换货承诺</el-radio>
          <el-radio label="七天无理由承诺">七天无理由承诺</el-radio>
        </el-radio-group>
      </div>
    </div>


    <el-button size="large" @click="submit" style="float: right;width: 90px; height: 40px;" type="primary">确认</el-button>


  </div>
</template>

<script>
import UploadComponent from '@/components/UploadComponent.vue'
import {addLease,getCategory,getLease,modifyLease} from '@/api/leaseManage'
export default {
  name: 'LeaseAdd',
  data() {
    return {
      edit:false,
      leaseData: {
        name: '',
        tag: '',
        categoryId: 0,
        categoryName: '',
        image: '',
        express: 2,
        scope: 1,
        pickup: '',
        description: '',
        service: '',
        video: '',
        payMethod: 1,
        stock:0,
        invoice: false,
        specs: [{ leaseTime: '', price: '', time: '' }],
        shopImages: [],
        specMethod: 1,
        loadTime: ''
      },
      initialData: {
        name: '',
        tag: '',
        categoryId: 0,
        categoryName: '',
        image: '',
        express: 2,
        scope: 1,
        pickup: '',
        description: '',
        service: '',
        video: '',
        payMethod: 1,
        stock:0,
        invoice: false,
        specs: [{ leaseTime: '', price: '', time: '' }],
        shopImages: [],
        specMethod: 1,
        loadTime: ''
      },
      leaseTimeOptions:[
        { id: 1, value: '三小时', time: 3 },
        { id: 2, value: '一天', time: 24 },
        { id: 3, value: '三天', time: 24*3 },
        { id: 4, value: '七天', time: 24*7 },
      ],
      categories:[]
    }
  },
  async created() {
    if (this.$route.params.id) {
      let id = this.$route.params.id
      this.edit = true
      let res =await getLease(id)
      this.leaseData=res.data.data
      this.initUpload()
      if (this.leaseData.specs.length === 1) {
        this.leaseData.specMethod = 1
      }
      else this.leaseData.specMethod = 2
    }
    let res = await getCategory()
    this.categories = res.data.data
  },
  methods: {
    changeSpec(idx) {
      if (idx === -1) this.leaseData.specs.push({ leaseTime: '', price: '', time: '' })
      else this.leaseData.specs.splice(idx, 1)
    },
    changeSpecMethod(index) {

      if (index === 1) {
        this.leaseData.specs.splice(1)//删除下标为0后面的
      }
      this.leaseData.specMethod = index
      this.$forceUpdate()
    },
    handleMainUpload(urls) {
      if (urls.length === 0) this.leaseData.image = ''
      else this.leaseData.image = urls[0].image
    },
    handleVideoUpload(urls) {
      if (urls.length === 0) this.leaseData.video = ''
      else this.leaseData.video = urls[0].image
    },
    handleImagesUpload(urls) {
      this.leaseData.shopImages = urls
    },
    clearUpload() {
      this.$refs.mainUpload.clearUpload()
      this.$refs.videoUpload.clearUpload()
      this.$refs.imagesUpload.clearUpload()

    },
    initUpload() {
      this.$refs.mainUpload.initImages(this.leaseData.image)
      this.$refs.videoUpload.initImages(this.leaseData.video)
      this.$refs.imagesUpload.initImages(this.leaseData.shopImages)
    },
    submitCheck() {
      let obj = this.leaseData
      if (obj.name.replace(/\s/g, "").length < 2) {
        this.$message.error('商品名称不能小于2个字符')
        return false
      }
      if (obj.tag.replace(/\s/g, "").length < 1) {
        this.$message.error('商品标签不能为空')
        return false
      }
      if (obj.description.replace(/\s/g, "").length < 1) {
        this.$message.error('商品详情不能为空')
        return false
      }
      if (obj.image === '') {
        this.$message.error('商品主图片不能为空')
        return false
      }
      if (parseInt(obj.stock).toString() !== obj.stock.toString()) {
        this.$message.error('库存数量必须为整数')
        return false
      }
      if (obj.express === 2 && obj.pickup.replace(/\s/g, "").length < 1) {
        this.$message.error('请输入自提点')
        return false
      }
      // if (obj.video === '') {
      //   this.$message.error('商品视频不能为空')
      //   return false
      // }
      // if (obj.shopImages.length < 1) {
      //   this.$message.error('商品详细图片不能为空')
      //   return false
      // }
      if (obj.service === '') {
        this.$message.error('请选择售后服务')
        return false
      }
      let flag = true
      obj.specs.forEach(spec => {
        if (spec.leaseTime.replace(/\s/g, "").length < 1) {
          this.$message.error('租赁时间不能为空')
          flag = false
        }
        if (isNaN(parseFloat(spec.price))) {
          this.$message.error('租赁价格必须为数字')
          flag = false
        }
        
      })
      if (!flag) return false
      return true
    },
    async submit(){
      //校验
      if(!this.submitCheck()){return}
      let res
      //编辑还是创建
      if(this.edit){
        //编辑
        res= await modifyLease(this.leaseData)
      }
      else{
        //创建
        res=await addLease(this.leaseData)
      }
      if (res.data.code === 1) {
        this.$message('操作成功')
        this.$router.replace({path:'/lease/list'})
      }
      console.log(res)
    },
    leaseTimeChange(option,index){
      let time= this.leaseTimeOptions.filter((cur)=>{
        return option===cur.value
      })[0].time
      // console.log('time',time)
      this.leaseData.specs[index].time=time
    },
    categoryChange(option){
      let id = this.categories.filter((cur) => {
        return option === cur.name
      })[0].id
      this.leaseData.categoryId = id
    }
  },
  components: {
    UploadComponent
  }
}
</script>

<style scoped>
.box {
  width: 1200px;
  margin: 0px 10px 20px 10px;
  padding: 10px 10px 30px 10px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.category {
  margin: 20px 0 10px 0;
  padding: 10px;
  width: 300px;
  height: 550px;
  border: #d6d6d6 solid 1px;

}

.shop-card {
  margin: 30px 10px 10px 10px;
  width: 195px;
  height: 92px;
  box-sizing: border-box;
  border: 0.5px solid #E5E5E5;
  position: relative;
  padding: 5px;
}

.selected-shop-card {
  margin: 30px 10px 10px 10px;
  width: 195px;
  height: 92px;
  box-sizing: border-box;
  border: 0.5px solid #409EFF;
  position: relative;
  color: #409EFF;
  background: #F3F7FE;
  padding: 5px;
}

.icon-box {
  position: absolute;
  bottom: 0%;
  right: 0%;
}

.spec-box {
  display: flex;
  margin: 10px 20px 10px 10px;
  align-items: center;
}

.goods-box {
  display: flex;
  margin: 10px 10px 20px 10px;
  align-items: center;
}
</style>